<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>重庆企业医院协会 会员中心</title>
    <include file="public@head_base"/>
    <style>
        .status-div {
            padding: 10px;
            width: 320px;
            margin: auto;
            text-align: center;
            margin-top: 120px;
        }

        .status-div img {
            width: 180px;
        }

        .status-div p {
            margin-top: 24px;
            font-size: 16px;
            color: #0055aa;
            text-align: center;
        }

        .user-header {
            height: 50px;
            background: #fff;
            border: solid 1px #e0e0e0;
            line-height: 50px;
            padding: 0 10px;
            color: #0B90C4;
            font-size: 14px;
        }

        .user-header .time {
            float: right;
            height: 50px;
            line-height: 50px;
            color: #ff7f50;
            font-size: 14px;
        }

        .row {
            position: relative;
            overflow: hidden;
            text-align: center;
            width: 720px;
            margin: auto;
        }

        .row .price-item {
            border: solid 2px #0B90C4;
            font-size: 14px;
            float: left;
            color: #444444;
            width: 160px;
            height: 40px;
            border-radius: 3px;
            text-align: center;
            margin-top: 8px;
        }

        .price-item .unit {
            font-size: 12px;
            color: #ff4e14;
        }

        .price-item .year {
            font-size: 14px;
            color: #444444;
            background: #f0f0f0;
            width: 40px;
            float: left;
            height: 40px;
            line-height: 40px;
        }

        .price-item .price {
            font-size: 18px;
            color: #ff4e14;
            float: left;
            width: 100px;
            line-height: 40px;
        }

        .payments {
            border-radius: 3px;
            border: solid 1px #e0e0e0;
            height: 40px;
            float: left;
            overflow: hidden;
            margin-top: 8px;
            margin-left: 100px;

        }

        .payments .tips {
            font-size: 12px;
            color: #444444;
            background: #f0f0f0;
            height: 40px;
            float: left;
            line-height: 40px;
            padding: 0 10px;
        }

        .payments .pay-item {
            border-left: solid 1px #e0e0e0;
            height: 40px;
            line-height: 40px;
            text-align: center;
            float: left;
            width: 120px;
            font-size: 14px;
            cursor: pointer;

        }

        .pay-item:hover {
            background: #0B90C4;
            color: #fff;
        }

        .pay-item.selected {
            background: #0B90C4;
            color: #fff;
        }
        .pay-qrcode {

            margin-top: 12px;
            margin-bottom: 24px;
        }
        .pay-qrcode .code-title {
            height: 24px;
            line-height: 24px;
            text-align: center;
            font-weight: 700;
            font-size: 14px;
        }
        .pay-qrcode .qrcode {
            border: solid 1px #e0e0e0;
            width: 240px;
            height: 240px;
            margin: auto;
        }

    </style>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <div class="layui-header">
        <div class="layui-logo">会员中心</div>
        <!-- 头部区域（可配合layui已有的水平导航） -->

        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item">
                <a href="javascript:;">
                    <img src="{:cmf_get_image_url($user.avatar)}" class="layui-nav-img">
                    {$user.user_nickname}
                </a>
                <!--<dl class="layui-nav-child">-->
                <!--<dd><a href="">基本资料</a></dd>-->
                <!--<dd><a href="">安全设置</a></dd>-->
                <!--</dl>-->
            </li>
            <li class="layui-nav-item"><a href="{:cmf_url('user/index/logout')}">退出</a></li>
        </ul>
    </div>

    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="nav">
                <li class="layui-nav-item "><a href="{:cmf_url('user/index/index')}">主页</a></li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">学术会议</a>
                    <dl class="layui-nav-child">
                        <dd><a href="{:cmf_url('user/meet/index')}">会议列表</a></dd>
                        <dd class=""><a href="{:cmf_url('user/meet/log')}">报名记录</a></dd>

                        <dd><a href="{:cmf_url('user/member/order')}">订单记录</a></dd>

                    </dl>
                </li>
                <li class="layui-nav-item "><a href="{:cmf_url('user/tougao/index')}">论文投稿</a></li>
                <li class="layui-nav-item layui-this"><a href="{:cmf_url('user/member/pay')}">会员缴费</a></li>

            </ul>
        </div>
    </div>

    <div class="layui-body" style="background: #f0f0f0;">
        <!-- 内容主体区域 -->
        <div style="padding: 15px;background: #ffffff;box-shadow: #e0e0e0 2px 2px 2px;">

            <blockquote class="layui-elem-quote">缴纳会费</blockquote>
            <if condition="$user.vip == 0">
                <p class="user-header">您还不是会员，请充值缴费</p>
                <else/>
                <p class="user-header">尊贵的会员，欢迎您回来！ <label class="time"><span style="color: #444444">会员时间至：</span>{$user.vip_time|date="Y-m-d
                    H:m",###}</label></p>
            </if>
            <div class="row">
                <div class="price-item">
                    <div class="year">1年</div>
                    <div class="price"><span class="unit">￥</span>{$site_info.user_price}</div>
                </div>

                <div class="payments">
                    <div class="tips">请选择支付方式</div>
                    <div class="pay-item" data-type="alipay">
                        支付宝
                    </div>
                    <div class="pay-item" data-type="weixin">
                        微信
                    </div>
                </div>
            </div>

            <div class="pay-qrcode" style="display: none">
                <div class="code-title">请扫描下面的二维码进行支付</div>
                <div class="qrcode" id="qrcode">

                </div>
            </div>

        </div>
    </div>

    <div class="layui-footer">
        <!-- 底部固定区域 -->
        © kooki.cn - 技术支持 夼旗科技
    </div>
</div>
<include file="public@scripts"/>
<script src="/static/js/qrcode.min.js"></script>
<script>
    //JavaScript代码区域
    layui.use(['element', 'table', 'layer'], function () {
        var element = layui.element;
        var table = layui.table;
        var layer = layui.layer;

    });
    var timer = null;

    $(".payments .pay-item").click(function () {
        $(".pay-item").removeClass("selected");

        console.log(type)
        $(this).addClass('selected');
        var type = $(this).data('type');
        loadOrder(type)

    })

    function loadOrder(type) {
        if (type == "weixin") {
            $("#qrcode").html("");
            $.get("{:cmf_url('user/member/createOrder')}",function (res) {
                console.log(res);
                if(res.code == 1){

                    $(".pay-qrcode").show()
                    var qrcode = new QRCode("qrcode");

                    qrcode.makeCode(res.data.code_url)
                    var order_no = res.data.order_no;
                    // stopTimer()
                    setupTimer(order_no)
                }
            })
        }else if(type == "alipay"){
            $("#qrcode").html("");
        }
    }


    function setupTimer(order_no) {
       setTimeout(function () {
           $.get("{:cmf_url('user/member/checkpay')}",{order_no:order_no},function (res) {
               if(res.code == 1){
                   layer.alert('您已成功缴纳会费',function () {
                       window.location.reload()
                   });
               }else {
                   setupTimer(order_no)
               }
           })
       },1000)
    }

    function detail(id) {
        // layer.open({
        //     type: 2,
        //     content: "{:cmf_url('user/tougao/detail')}?id=" + id,
        //     title:'投稿详情',
        //     area:['80%','480px']
        // })
    }
</script>

</body>
</html>
